<template>
  <!--值班人员列表-->
  <div class="unity_duty_list body-bg" v-loading="loading">
    <!--    <div class="unity_title_div_right">
          <div>
            <el-date-picker class="u_date_picker"
                            popper-class="u_date_picker_popper"
                            v-model="TESTFROMDATA.duty_time"
                            type="date"
                            placeholder="值班日期"
                            @change="changeTime()">
            </el-date-picker>
          </div>
          <div>
            <el-input class="u_input" @clear="searchList"
                      v-model="TESTFROMDATA.name"
                      @keyup.native.enter="searchList" placeholder="搜索河流、水库等">
              &lt;!&ndash;            prefix-icon="el-icon-search"&ndash;&gt;
              <el-button slot="append" icon="el-icon-search"
                         @click="searchList"></el-button>
            </el-input>
          </div>
          &lt;!&ndash;        <div class="unity_close">
                    <i class="el-icon-close" style="cursor: pointer" @click="toClose"></i>
                  </div>&ndash;&gt;
        </div>-->
    <close @click.native="toClose"></close>
    <big-center-title :title="list_tilte"
                      :titleBacColor="list_titleBacColor"></big-center-title>
    <div class="danger_table_div">
      <el-row class="my_u_row">
        <el-col class="my_u_col my_u_col_center" :span="2">
          <span>序号</span>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="3">
          <span>姓名</span>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="3">
          <span>联系方式</span>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="4">
          <span>值班日期</span>
        </el-col>
        <el-col class="my_u_col my_u_col_left" :span="4">
          <span>值班位置</span>
        </el-col>
        <el-col class="my_u_col my_u_col_left" :span="8">
          <span>值班内容</span>
        </el-col>
      </el-row>
      <el-row class="my_u_row" :class="index==9?'my_u_row_noborder':''"
              v-for="(item,index) in datalist" :key="item.id">
        <el-col class="my_u_col my_u_col_center" :span="2">
          <span>{{ (pageNum - 1) * size + (index + 1) }}</span>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="3">
          <span>{{ item.name || '--' }}</span>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="3">
          <!-- <span>{{ item.phone || '--' }}</span> -->
		  <el-tooltip class="item" effect="dark" :content="item.phone" placement="top-start">
		    <span>{{ item.phone }}</span>
		  </el-tooltip>
        </el-col>
        <el-col class="my_u_col my_u_col_center" :span="4">
          <span>{{ item.duty_time || '--' }}</span>
        </el-col>
        <el-col class="my_u_col my_u_col_left" :span="4">
          <!--          <span>{{ item.address || '&#45;&#45;' }}</span>-->
          <el-tooltip class="item" effect="dark" :content="item.address" placement="top-start">
            <span>{{ item.address }}</span>
          </el-tooltip>
        </el-col>
        <el-col class="my_u_col my_u_col_left" :span="8">
          <!--          <span>{{ item.address || '&#45;&#45;' }}</span>-->
          <el-tooltip class="item" effect="dark" :content="item.content" placement="top-start">
            <span>{{ item.content }}</span>
          </el-tooltip>
        </el-col>
      </el-row>
      <!--      <el-row class="my_u_row" v-if="datalist.length<10&&datalist.length>0" v-for="(item,index) in (10-datalist.length)"
                    :key="index+'u'">
              <el-col class="my_u_col my_u_col_center" :span="2">
                <span>{{ datalist.length + index + 1 }}</span>
              </el-col>
              <el-col class="my_u_col my_u_col_center" :span="3">
                <span></span>
              </el-col>
              <el-col class="my_u_col my_u_col_center" :span="3">
                <span></span>
              </el-col>
              <el-col class="my_u_col my_u_col_center" :span="5">
                <span></span>
              </el-col>
              <el-col class="my_u_col my_u_col_left" :span="11">
                <span></span>
              </el-col>
            </el-row>-->
      <!--      <div class="u_zanwu" v-if="datalist.length<=0">暂无数据</div>-->
    </div>
    <!--分页-->
    <pagination
      :total="total"
      :currentPage="pageNum"
      :pageSize="size"
      position="center"
      @search="searchPagination"
      class="u_pagination"
    >
    </pagination>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import pagination from '@/components/common/pagination/pagination'
import UnityIm from '../../utils/unityIm'
import bigCenterTitle from '@/components/unityweb/big-center-title'
import close from '@/components/unityweb/close'
import back from '@/components/unityweb/back'

export default {
  components: {
    pagination,
    'big-center-title': bigCenterTitle,
    close,
    back
  },
  data() {
    return {
      token: '',
      // 筛选内容
      TESTFROMDATA: {
        name: '',
        // duty_time: ''
        duty_time: this.$utils.formatDateTime(new Date())
          .substring(0, 10),
      },
      list_tilte: '值班人员列表',
      list_titleBacColor: 'linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%)',
      // 列表的数据
      datalist: [],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,
      level: {
        level1: {
          color: '#EC2C2C',
          level: 1,
          level_name: '特别严重',
          level_chinese: '一级'
        },
        level2: {
          color: '#FF9811',
          level: 2,
          level_name: '严重',
          level_chinese: '二级'
        },
        level3: {
          color: '#FFE400',
          level: 3,
          level_name: '较重',
          level_chinese: '三级'
        },
        level4: {
          color: '#3F8FFB',
          level: 4,
          level_name: '一般',
          level_chinese: '四级'
        }
      },
      loading: false,
    }
  },
  created() {
    var _this = this
    //获取token
    // _this.getToken();
    _this.getListPage()
    // _this.getListPage();
    _this.loading = true
    setTimeout(function () {
      _this.loading = false
    }, 5000)
  },
  mounted() {
  },
  methods: {
    toClose() {
      UnityIm.closePanelManager('riverDutyList')
    },
    //先获取token
    getToken() {
      var _this = this
      var datas = {}
      /* _this.$apis.u_getToken(datas)
         .then(res => {
           if (res.result == 0) {
             _this.token = res.data
             // 存token
             sessionStorage.setItem('token', _this.token)
             _this.getListPage()
           }
         })*/
    },
    //查询列表
    getListPage() {
      var _this = this
      var datas = {
        page: _this.page,
        size: _this.size,
        // 人名、河流、水库等字符串
        // name: _this.TESTFROMDATA.name,
        // duty_time: _this.TESTFROMDATA.duty_time
      }

      _this.$apis.duty_list(datas)
        .then(res => {
          if (res.result == 0) {
            _this.datalist = res.data
            // console.log(_this.datalist)
            _this.total = res.rows
            _this.pageNum = res.page
            _this.loading = false
          }
        })
    },
    //值班信息
    zbinformation(item) {
      var tt = ''
      if (item.length <= 0) {
        tt = '--'
      } else {
        for (let i in item) {
          if (i == item.length - 1) {
            // console.log('111111111')
            tt = tt + item[i]
          } else {
            // console.log('2222222')
            tt = tt + item[i] + ','
          }
        }
      }
      return tt
    },
    //模糊查询
    searchList() {
      this.page = 1
      this.datalist = []
      // this.getListPage();
      this.getToken()
    },
    changeTime() {
      //时间转换
      // console.log(this.TESTFROMDATA.duty_time)
      if (this.TESTFROMDATA.duty_time != null) {
        const date = new Date(this.TESTFROMDATA.duty_time)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        var minute = date.getMinutes()
        minute = minute < 10 ? ('0' + minute) : minute
        var second = date.getSeconds()
        second = second < 10 ? ('0' + second) : second
        this.TESTFROMDATA.duty_time = y + '-' + m + '-' + d
      } else {
        this.TESTFROMDATA.duty_time = ''
      }
      this.searchList()
    },
    //分页
    searchPagination(page) {
      this.page = page
      // this.getToken()
      this.getListPage()
    },
  }
}
</script>

<style lang="scss">
#app {
  background: none;
  overflow: hidden !important;
}

.unity_duty_list {
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  color: #fff;
  //padding: 35px;
  overflow: hidden !important;

  .unity_title_div {
    //width: calc(100% - 66px);
    //padding: 35px 35px 28px 35px;
    height: 61px;
    padding-left: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end !important;

    .unity_title {
      height: 15px;
      background: linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%);
      border-radius: 6px;

      .unity_title_text {
        position: relative;
        padding: 0 20px;
        height: 24px;
        font-size: 24px;
        /*font-family: siyuan_bold;*/
        font-family: siyuan_bold;
        font-weight: bold;
        top: -18px;
        text-align: center;
      }
    }
  }

  .unity_title_div_right {
    display: flex;
    position: absolute;
    right: 35px;
    top: 85px;
    z-index: 100 !important;

    .unity_close {
      color: #fff;

      i {
        position: relative;
        padding: 0 35px;
        font-size: 40px;
      }
    }
  }

  .danger_table_div {
    //margin: 0px 35px 0px 35px;
    height: calc(100% - 85px - 54px);
    padding: 0 15px;
    margin: 0px 35px 0 35px;
    border: 1px solid #BFBFBF;
	font-family: siyuan_regular;
    font-size: 14px;
  }


  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
}
  .danger_table_div .el-tooltip__popper{
	  font-size: 14px !important;
  }

//.el-table {
//  background: none !important;
//}
//
//.el-table__header-wrapper {
//  background: none !important;
//  height: calc((100% - 24px) / 11);
//}
//
//.el-table th, .el-table tr {
//  background: none !important;
//  color: #fff !important;
//  height: 100% !important;
//}
//
//.el-table tbody tr:hover > td {
//  background-color: unset !important; //修改成自己想要的颜色即可
//}
//
//.el-table thead {
//  color: #fff !important;
//}
//
//.el-table::before {
//  height: 0px !important;
//}
//
//.el-table__row:last-child td {
//  border: none !important;
//}
.unity_duty_list {
  .pagination {
    //margin: 16px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .el-pagination {
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .el-pagination__total {
    color: #fff !important;
  }

  .el-pagination button {
    color: #fff !important;
    background-color: unset !important;
  }

  .el-pagination .el-input__inner {
    color: #fff !important;
    background-color: unset !important;
  }

  .u_pagination {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination__jump {
    color: #ffffff !important;
  }

  .el-pagination__editor.el-input .el-input__inner {
    border: solid 1px #fff !important;
  }

  .el-pagination.is-background .el-pager li {
    background-color: unset !important;
    color: #fff !important;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF !important;
  }

  .my_u_row {
    //border-bottom: 1px dashed #fff;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    height: calc(100% / 11);
    display: flex;
    align-items: center;
  }

  .my_u_row:last-child {
    //border: none;
  }

  .my_u_row_noborder {
    border: none !important;
  }

  .my_u_col {
    //border-right: 1px dashed #fff;
    //padding: 10px 20px;

    //height: 100%;

  }

  .my_u_col span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    word-break: break-all;
    /* 内容自动换行 */
  }

  .my_u_col_center {
    text-align: center !important;
  }

  .my_u_col_center span {
    width: 100% !important;
    text-align: center !important;
  }

  .my_u_col_left {
    text-align: left !important;
  }

  .my_u_col_left span {
    width: 100% !important;
    text-align: left !important;
  }

  .my_u_col:last-child {
    border: none !important;
  }

  .u_zanwu {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
  }

  .u_date_picker {
    width: 150px !important;
    padding-right: 10px;
  }

  .u_date_picker .el-input__inner {
    //background: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: solid 1px #BFBFBF;
    color: #fff !important;
  }

  .u_date_picker .el-input__prefix {
    color: #fff !important;
    //right: 20px !important;
  }

  .u_date_picker .el-input__suffix {
    color: #fff !important;
    right: 20px !important;
  }

  .el-input__prefix .el-input__icon {
    color: #fff !important;
  }

  .el-input__suffix .el-input__icon {
    color: #fff !important;
  }

  .el-icon-cricle-close:before {
    color: #fff !important;
  }
}


//////////////////////////////////////////////////////////


.unity_duty_list {
  .u_input {
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7) !important;
  }

  .u_input .el-input__inner {
    //background: none !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: solid 1px #BFBFBF;
    color: #fff !important;
    border-right: none !important;
  }

  .u_input .el-input-group__append {
    background: none;
    border: solid 1px #BFBFBF;
    color: #fff;
    border-left: none !important;
  }

  /*修改elementui 里面input的placeholder字体颜色*/
  .el-input__inner::placeholder {
    color: #FFF !important;
  }

  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    color: #FFF !important;
  }

  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    color: #FFF !important;
  }

  /*ie*/
  .el-input__inner:-ms-input-placeholder {
    color: #FFF !important;
  }

  ::v-deep(.el-input__inner::placeholder) {
    color: #fff !important;
  }
}

.unity_duty_list .el-row {
  margin: 0px !important;
  padding: 0px !important;
}

.unity_duty_list .el-col {
  padding: 0px !important;
  border: none !important;
}

.unity_duty_list ::v-deep .el-input__inner:hover {
  background-color: transparent !important;
  border: solid 1px #fff !important;
  color: #fff !important;
  //border-right: none !important;
}

.u_my_popover {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  color: #fff !important;
  margin-top: 3px !important;
}

.u_my_popover .popper__arrow {
  border-top-color: rgba(0, 0, 0, 0.7) !important;
  bottom: -5px !important;
}

.u_my_popover .popper__arrow::after {
  border-top-color: rgba(0, 0, 0, 0.7) !important;
}

.u_date_picker_popper {
  background-color: rgba(0, 0, 0, 0.7) !important;
  //border: none !important;
  border: solid 1px #BFBFBF !important;
  color: #fff !important;
  margin-top: 3px !important;

}

.u_date_picker_popper .popper__arrow {
  border-bottom-color: rgba(0, 0, 0, 0.7) !important;
  top: -5px !important;
  display: none !important;
}

.u_date_picker_popper .popper__arrow::after {
  border-bottom-color: rgba(0, 0, 0, 0.7) !important;
}

.u_date_picker_popper .el-picker-panel__icon-btn {
  color: #fff !important;
}

.u_date_picker_popper .el-date-picker__header-label {
  color: #fff !important;
}

.u_date_picker_popper .el-date-table th {
  color: #fff !important;
}
</style>
